<template>
  <div
    ref="nav"
    class="ui fixed inverted stackable pointing menu"
    :class="{
      transparent: $route.name === 'home' && clientSize.clientWidth > 768
    }"
  >
    <div class="ui container">
      <router-link to="/">
        <h3 class="ui header item m-blue">{{ blogName }}</h3>
      </router-link>
      <router-link
        to="/home"
        class="item"
        :class="{ 'm-mobile-hide': mobileHide, active: $route.name === 'home' }"
      >
        <i class="home icon"></i>首页
      </router-link>
      <el-dropdown trigger="click" @command="categoryRoute">
        <span
          class="el-dropdown-link item"
          :class="{
            'm-mobile-hide': mobileHide,
            active: $route.name === 'category'
          }"
        >
          <i class="idea icon"></i>分类
          <i class="caret down icon"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            :command="category.id"
            v-for="(category, index) in categoryList"
            :key="index"
          >{{ category.categoryName }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <router-link
        to="/archives"
        class="item"
        :class="{
          'm-mobile-hide': mobileHide,
          active: $route.name === 'archives'
        }"
      >
        <i class="clone icon"></i>归档
      </router-link>
      <router-link
        to="/moments"
        class="item"
        :class="{
          'm-mobile-hide': mobileHide,
          active: $route.name === 'moments'
        }"
      >
        <i class="comment alternate outline icon"></i>动态
      </router-link>
      <router-link
        to="/friends"
        class="item"
        :class="{
          'm-mobile-hide': mobileHide,
          active: $route.name === 'friends'
        }"
      >
        <i class="users icon"></i>友人帐
      </router-link>
      <router-link
        to="/about"
        class="item"
        :class="{
          'm-mobile-hide': mobileHide,
          active: $route.name === 'about'
        }"
      >
        <i class="info icon"></i>关于我
      </router-link>
      <el-autocomplete
        v-model="queryString"
        :fetch-suggestions="debounceQuery"
        placeholder="Search..."
        class="right item m-search"
        :class="{ 'm-mobile-hide': mobileHide }"
        popper-class="m-search-item"
        @select="handleSelect"
      >
        <i class="search icon el-input__icon" slot="suffix"></i>
        <template slot-scope="{ item }">
          <div class="title">{{ item.title }}</div>
          <span class="content">{{ item.content }}</span>
        </template>
      </el-autocomplete>
      <button class="ui menu black icon button m-right-top m-mobile-show" @click="toggle">
        <i class="sidebar icon"></i>
      </button>
    </div>
  </div>
</template>

<script>
import { searchBlog } from '@/api/blog'
import { mapState } from 'vuex'

export default {
  name: 'Nav',
  props: {
    /**
     * 博客网站名称
     */
    blogName: {
      type: String,
      required: true
    },
    /**
     * 分类集合
     */
    categoryList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      mobileHide: true,
      queryString: '',
      queryResult: [],
      timer: null
    }
  },
  computed: {
    ...mapState({
      clientSize: state => state.settings.clientSize
    })
  },
  watch: {
    //路由改变时，收起导航栏
    '$route.path' () {
      this.mobileHide = true
    }
  },
  mounted () {
    //监听页面滚动位置，改变导航栏的显示
    window.addEventListener('scroll', () => {
      //首页且不是移动端

      if (this.$route.name === 'home' && this.clientSize.clientWidth > 768) {
        if (window.scrollY > this.clientSize.clientHeight / 2) {
          this.$refs.nav.classList.remove('transparent')
        } else {
          this.$refs.nav.classList.add('transparent')
        }
      }
    })
    //监听点击事件，收起导航菜单
    document.addEventListener('click', e => {
      //如果导航栏是打开状态，且点击的元素不是Nav的子元素，则收起菜单
      if (!this.mobileHide) {
        this.mobileHide = true
      }
    })
  },
  methods: {
    toggle () {
      this.mobileHide = !this.mobileHide
    },
    categoryRoute (categoryId) {
      this.$router.push(`/category/${categoryId}`)
    },
    debounceQuery (queryString, callback) {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(
        () => this.querySearchAsync(queryString, callback),
        1000
      )
    },
    querySearchAsync (queryString, callback) {
      if (
        queryString == null ||
        queryString.trim() === '' ||
        queryString.indexOf('%') !== -1 ||
        queryString.indexOf('_') !== -1 ||
        queryString.indexOf('[') !== -1 ||
        queryString.indexOf('#') !== -1 ||
        queryString.indexOf('*') !== -1 ||
        queryString.trim().length > 20
      ) {
        return
      }
      searchBlog({
        keyword: queryString,
        adminToken: this.$store.getters.token
      }).then(res => {
        this.queryResult = res.data
        if (this.queryResult.length === 0) {
          this.queryResult.push({ title: '无相关搜索结果' })
        }
        callback(this.queryResult)
      })
    },
    handleSelect (item) {
      if (item.id) {
        this.$router.push(`/blog/${item.id}`)
      }
    }
  }
}
</script>

<style>
.ui.fixed.menu .container {
  width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ui.fixed.menu {
  transition: 0.3s ease-out;
}

.ui.inverted.pointing.menu.transparent {
  background: transparent !important;
}

.ui.inverted.pointing.menu.transparent .active.item:after {
  background: transparent !important;
  transition: 0.3s ease-out;
}

.ui.inverted.pointing.menu.transparent .active.item:hover:after {
  background: transparent !important;
}

.el-dropdown-link {
  outline-style: none !important;
  outline-color: unset !important;
  height: 100%;
  cursor: pointer;
}

.el-dropdown-menu {
  margin: 7px 0 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #1b1c1d !important;
}

.el-dropdown-menu__item {
  padding: 0 15px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.el-dropdown-menu__item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.el-popper .popper__arrow::after {
  content: none !important;
}

.popper__arrow {
  display: none !important;
}

.m-search {
  min-width: 220px;
  padding: 0 !important;
}

.m-search input {
  color: rgba(255, 255, 255, 0.9);
  border: 0px !important;
  background-color: inherit;
  padding: 0.67857143em 2.1em 0.67857143em 1em;
}

.m-search i {
  color: rgba(255, 255, 255, 0.9) !important;
}

.m-search-item {
  min-width: 350px !important;
}

.m-search-item li {
  line-height: normal !important;
  padding: 8px 10px !important;
}

.m-search-item li .title {
  text-overflow: ellipsis;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.87);
}

.m-search-item li .content {
  text-overflow: ellipsis;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
}
</style>
